<!DOCTYPE html>
<html lang="en">
<head>
	#parse("head.html")
	<title>Emplist</title>
</head>
<body>

## 使用velocity进行模态框的包含，加载模态框

	#parse("empAddModel.html")
    <div class="container">
##        显示标题
		<div class="row">
            <div class="col-xs-12">
                <h1>EmpList
					<a class="glyphicon glyphicon-arrow-left btn btn-info" href="${WEB_PATH}/user/logout">退出</a>
				</h1>
            </div>

        </div>
##    显示按钮，新增和删除
		<div class="row">
			<div class="col-md-offset-8">
				<button class="btn btn-success glyphicon glyphicon-plus" id="add_emp_model">新增</button>
				<button class="btn btn-danger glyphicon glyphicon-remove">删除</button>
            </div>
        </div>
##表格
    
		<div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>ename</th>
                            <th>dname</th>
                            <th>creatime</th>
                            <th>updatetime</th>
                            <th>操作</th>
                        </tr>
					</thead>
                    <tbody>

                    </tbody>
##					<tr>
##						<th>1</th>
##						<th>ename</th>
##						<th>dname</th>
##						<th>creatime</th>
##						<th>updatetime</th>
##						<th>
##							<button class="btn btn-primary glyphicon glyphicon-pencil btn-sm">编辑</button>
##							<button class="btn btn-danger glyphicon glyphicon-remove btn-sm">删除</button>
##						</th>
##					</tr>
                </table>
            </div>
        </div>
##    分页信息
		<div class="row">
            <div class="col-md-6" id="pageInfo">

            </div>
                <div class="col-md-6" id="page_nav">
                    <nav aria-label="Page navigation">
                        <ul class="pagination" id="nav_ul">
    ##						<li id="prePage">
    ##							<a href="#" aria-label="Previous">
    ##								<span aria-hidden="true">&laquo;</span>
    ##							</a>
    ##						</li>
    ##						<li id="firstPage"><a href="#">首页</a></li>
    ##
    ##
    ##
    ##						<li id="endPage"><a href="#">尾页</a></li>
    ##						<li id=""nextPage">
    ##							<a href="#" aria-label="Next">
    ##								<span aria-hidden="true">&raquo;</span>
    ##							</a>
    ##						</li>
                        </ul>
                    </nav>
                </div>
        </div>

    </div>



<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url:"${WEB_PATH}/emp/select/all",
            type:"GET",
            success:function(result){
                table(result) ;
                pageInfo(result) ;
				builtNav(result) ;

            }

        });
        //显示模态框，雇员增加
        $("#add_emp_model").on("click",function(){
            $.ajax({
                url:"${WEB_PATH}/dept/select/all",
                type:"GET" ,
                success:function (deptResult) {
					$.each(deptResult.data,function(index,item){
						$("#dept_add_select").append($("<option></option>").append(item.dname).attr("value",item.deptno)) ;
                    }) ;
				}
            }) ;
			$("#empAddModel").modal({
				backdrop:"static"
			});
        }) ;
//        雇员保存模态框的提交按钮
        $("#emp_add_btn").on("click",function(){
			//alert($("#empAddModel form").serialize()) ;
            $.ajax({
                url:"${WEB_PATH}/emp/save",
                type:"POST",
                data:$("#empAddModel form").serialize(),
                success:function(saveResult){
					$("#empAddModel").modal('hide');
					//console.log(saveResult) ;
					to_Page(10000000) ;
                }
            });

        }) ;

        //雇员更新模态框事件绑定
        $("#emp_edit_btn").on("click",function(){
            //alert($("#empEditModel form").serialize()) ;
            $.ajax({
                url:"${WEB_PATH}/emp/update" ,
                data:$("#empEditModel form").serialize(),
                type: "POST",
                success:function (updateResult) {
					$("#empAddModel").modal('hide');
					to_Page();
                    alert(updateResult.msg) ;
				}
            }) ;

        }) ;

    });
    //动态加载表格
    function table(result){
		$("#emps tbody").empty();
        var emps = result.data.list;
        $.each(emps,function(index,item){
            var empnoTd = $("<td></td>").append(item.empno) ;
            var enameTd = $("<td></td>").append(item.ename) ;
            var dnameTd = $("<td></td>").append(item.dept.dname) ;
            var createTimeTd = $("<td></td>").append(item.createtime) ;
            var updateTimeTd = $("<td></td>").append(item.updatetime) ;
            var editBtn = $("<button></button>").append("编辑").attr("class","btn btn-primary glyphicon glyphicon-pencil btn-sm").attr("value",item.empno).attr("data",item.ename) ;
//            var editButton = "<button class=\"btn btn-primary glyphicon glyphicon-pencil btn-sm\">编辑</button>" ;
			var delBtn = $("<button></button>").append("删除").attr("class","btn btn-danger glyphicon glyphicon-remove btn-sm").attr("value",item.empno) ;
//            var delButton = "<button class=\"btn btn-danger glyphicon glyphicon-remove btn-sm\">删除</button>" ;
            var buttonTd = $("<td></td>").append(editBtn).append(delBtn) ;
            $("#emps tbody").append($("<tr></tr>").append(empnoTd).append(enameTd).append(dnameTd).append(createTimeTd).append(updateTimeTd).append(buttonTd)) ;

			delBtn.on("click",function(){
//			    alert(this.value) ;
				$.ajax({
					url:"${WEB_PATH}/emp/delete/"+ this.value ,
					type:"POST",
					success:function(deleteResult){
						console.log(deleteResult) ;
					}
				}) ;
				to_Page(result.data.pageNum) ;
			}) ;
			//雇员更新绑定事件
			editBtn.on("click",function(){
			    $("#empEditModel #empno,#empEditModel #ename,#empEditModel #ename,#empEditModel #dept_edit_select").empty() ;
			    $("#empEditModel #empno").val(this.value) ;
				$.ajax({
					url:"${WEB_PATH}/dept/select/all",
					type:"GET" ,
					success:function (deptResult) {
						$.each(deptResult.data,function(index,item){
						    $("#empEditModel #ename").attr("value",editBtn.attr("data")) ;
						    if(item.deptno.toString()==editBtn.val()){
								$("#dept_edit_select").append($("<option></option>").append(item.dname).attr("selected","").attr("value",item.deptno)) ;
								alert("等于") ;
                            }
                            console.log(item.deptno==editBtn.val()) ;
							$("#dept_edit_select").append($("<option></option>").append(item.dname).attr("value",item.deptno)) ;
						}) ;
					}
				}) ;
				$("#empEditModel").modal({
					backdrop:"static"
				});

			}) ;
        }) ;

    }
    //加载分页的信息
    function pageInfo(result){
		$("#pageInfo").empty() ;
		$("#pageInfo").append("当前页码:"+ (result.data.pageNum) +"总页数:"+result.data.allPageNum) ;
    }
    //创建分页条
    function builtNav(result){
		var nav_ul = $("#nav_ul") ;
		nav_ul.empty() ;
        var before= "<li id=\"prePage\">\n" +
				"\t\t\t\t\t\t\t<a href=\"#\" aria-label=\"Previous\">\n" +
				"\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&laquo;</span>\n" +
				"\t\t\t\t\t\t\t</a>\n" +
				"\t\t\t\t\t\t</li>\n" +
				"\t\t\t\t\t\t<li id=\"firstPage\"><a href=\"#\">首页</a></li>" ;
        var after ="<li id=\"endPage\"><a href=\"#\">尾页</a></li>\n" +
				"\t\t\t\t\t\t<li id=\"nextPage\">\n" +
				"\t\t\t\t\t\t\t<a href=\"#\" aria-label=\"Next\">\n" +
				"\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&raquo;</span>\n" +
				"\t\t\t\t\t\t\t</a>\n" +
				"\t\t\t\t\t\t</li>" ;

		nav_ul.append(before) ;


        $.each(result.data.pageNav,function(index,item){

			var listTd = $("<li></li>").append($("<a></a>").attr("href","javascript:;").append(item)).attr("value",item) ;
			listTd.on("click",function(){
			    to_Page(item) ;
            })
			if(result.data.pageNum==item){
                listTd.addClass("active") ;
            }
			nav_ul.append(listTd) ;
        }) ;
		nav_ul.append(after) ;

		//给导航条添加点击事件
		$("#prePage").on("click",function(){
			to_Page(result.data.pageNum-1) ;
		});
		$("#nextPage").on("click",function(){
			to_Page(result.data.pageNum+1) ;
		});
		$("#firstPage").on("click",function(){
			to_Page(1) ;
		});
		$("#endPage").on("click",function(){
			to_Page(result.data.allPageNum) ;
		});
//        判断是否是第一页或者后一页
		if(result.data.hasPre==false){
			$("#prePage,#firstPage").addClass("disabled") ;
		}
		if(result.data.hasNext==false){
			$("#endPage,#nextPage").addClass("disabled") ;
        }
    }

	//点击分页条可以跳转至指定的页面
	function to_Page(pn){
		$.ajax({
			url:"${WEB_PATH}/emp/select/all" ,
			data:"pageNum="+pn,
			type:"GET",
            success:function(result){
				table(result) ;
				pageInfo(result) ;
				builtNav(result) ;
			},
			error:function(jqXHR, textStatus, errorThrown){
				if(jqXHR.status==401){
				    alert("用户身份已经过期，请重新登录") ;
				    window.location="${WEB_PATH}/loginPre" ;
				}
			}
	    }) ;
	}
</script>
</body>
</html>